﻿<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:r="clr-namespace:Bookvar.UI.Localization;assembly=Bookvar.UI" 
    xmlns:atp="clr-namespace:Microsoft.Samples.KMoore.WPFSamples.AnimatingTilePanel;assembly=J832.Wpf.BagOTricksLib"
    x:Class="BookvarWpf.BookvarNavigation" 
    ShowsNavigationUI="False"
    Title="BookvarNavigation"
    >
	<Page.Resources>
		<Storyboard x:Key="intro">
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="spashPanel" Storyboard.TargetProperty="(UIElement.Opacity)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
				<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.3000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="0" KeySpline="0.5,0,0.5,0.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="spashPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.7"/>
				<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.3000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="1.3" KeySpline="0.5,0,0.5,0.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="spashPanel" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
				<SplineDoubleKeyFrame KeyTime="00:00:01" Value="0.7"/>
				<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:01.3000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.6000000" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="1.3" KeySpline="0.5,0,0.5,0.5"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="content" Storyboard.TargetProperty="(UIElement.Opacity)">
				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
				<SplineDoubleKeyFrame KeyTime="00:00:02.8000000" Value="0"/>
				<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1" KeyTime="00:00:03" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Style x:Key="ImageNew" TargetType="{x:Type Image}">
			<Style.Triggers>
				<Trigger Property="Image.IsMouseOver" Value="True">
					<Setter Property="Image.Source" Value="Resources/Icons/128x128/new.png" />
				</Trigger>
				<Trigger Property="Image.IsMouseOver" Value="False">
					<Setter Property="Image.Source" Value="Resources/Icons/128x128/new_inactive.png" />
				</Trigger>
			</Style.Triggers>
		</Style>
		<Style x:Key="ImageOpen" TargetType="{x:Type Image}">
			<Style.Triggers>
				<Trigger Property="Image.IsMouseOver" Value="True">
					<Setter Property="Image.Source" Value="Resources/Icons/128x128/open.png" />
				</Trigger>
				<Trigger Property="Image.IsMouseOver" Value="False">
					<Setter Property="Image.Source" Value="Resources/Icons/128x128/open_inactive.png" />
				</Trigger>
			</Style.Triggers>
		</Style>
		<Style x:Key="TextBlockIcon" TargetType="{x:Type TextBlock}">
			<Setter Property="FontFamily" Value="Palatino Linotype" />
			<Setter Property="FontSize" Value="26" />
			<Setter Property="Typography.NumeralStyle" Value="OldStyle" />
			<Setter Property="Typography.HistoricalLigatures" Value="True" />
			<Setter Property="Typography.DiscretionaryLigatures" Value="True" />
			<Setter Property="Foreground" Value="#FF175C86" />
		</Style>
	</Page.Resources>
	<Page.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<EventTrigger.Actions>
				<BeginStoryboard Storyboard="{StaticResource intro}" />

			</EventTrigger.Actions>
		</EventTrigger>
	</Page.Triggers>
	<Grid>
		<Grid.Resources>
			<Style TargetType="{x:Type TextBox}">
				<Setter Property="HorizontalContentAlignment" Value="Left" />
				<Setter Property="BorderThickness" Value="0,0,0,0" />
				<Setter Property="Margin" Value="2,2,2,2" />
				<Setter Property="Background" Value="Transparent" />
			</Style>

			<Style TargetType="{x:Type Border}">
				<Setter Property="HorizontalAlignment" Value="Left" />
				<Setter Property="VerticalAlignment" Value="Center" />
				<Setter Property="BorderBrush" Value="#FF85A7DB" />
				<Setter Property="Background" Value="#FFF0F7FF" />
				<Setter Property="CornerRadius" Value="5,5,5,5" />

				<Setter Property="Height" Value="24" />

				<Setter Property="BorderThickness" Value="1,1,1,1" />
			</Style>

			<Style TargetType="{x:Type Label}">
				<Setter Property="FontFamily" Value="Verdana" />
				<Setter Property="FontSize" Value="10" />
				<Setter Property="Foreground" Value="#FF3E6494" />
				<Setter Property="HorizontalContentAlignment" Value="Left" />
			</Style>


			<ControlTemplate x:Key="templateSlider" TargetType="Slider">

				<!-- Border properties are probably unused -->
				<Border BorderBrush="{TemplateBinding BorderBrush}"
						BorderThickness="{TemplateBinding BorderThickness}"
						Background="{TemplateBinding Background}">

					<!-- Grid layout accomodates two TickBars and Track -->
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition />
							<ColumnDefinition Width="Auto" />
						</Grid.ColumnDefinitions>

						<!-- TickBars are collapsed (invisible) by default) -->
						<TickBar Grid.Column="0" Name="LeftTick"
								 Width="10" Placement="Left" Visibility="Collapsed"
								 Fill="{TemplateBinding Foreground}" />

						<TickBar Grid.Column="2" Name="RightTick"
								 Width="10" Placement="Right" Visibility="Collapsed"
								 Fill="{TemplateBinding Foreground}" />

						<!-- The groove image is provided by this Border -->


						<Border Grid.Column="1" Height="8" Margin="0"
								CornerRadius="2 2 2 2"
								BorderThickness="1" BorderBrush="#FFA9C3DD">
							<Border.Background>
								<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
									<GradientStop Color="#FFA9C3DD" Offset="0"/>
									<GradientStop Color="#FFFFFFFF" Offset="0.927"/>
									<GradientStop Color="#FFA9C3DD" Offset="0.442"/>
									<GradientStop Color="#FFFCFCFC" Offset=" 0.718"/>
								</LinearGradientBrush>
							</Border.Background>
						</Border>

						<!-- That same Grid cell is occupied by the Track -->
						<Track Grid.Column="1" Name="PART_Track">
							<Track.DecreaseRepeatButton>

								<!-- The two RepeatButtons are transparent -->
								<RepeatButton Command="Slider.DecreaseLarge"
											  IsTabStop="False" Focusable="False">
									<RepeatButton.Template>
										<ControlTemplate>
											<Border Background="Transparent" />
										</ControlTemplate>
									</RepeatButton.Template>
								</RepeatButton>
							</Track.DecreaseRepeatButton>

							<Track.IncreaseRepeatButton>
								<RepeatButton Command="Slider.IncreaseLarge"
											  IsTabStop="False" Focusable="False">
									<RepeatButton.Template>
										<ControlTemplate>
											<Border Background="Transparent" />
										</ControlTemplate>
									</RepeatButton.Template>
								</RepeatButton>
							</Track.IncreaseRepeatButton>
							<Track.Thumb>
								<Thumb >
									<Thumb.Template>
										<ControlTemplate>
											<Border Background="Transparent">
												<Rectangle Stroke="#FFA9C3DD" StrokeThickness="1" HorizontalAlignment="Left"
														   VerticalAlignment="Top" Width="15" Height="29.333">
													<Rectangle.Fill>
														<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
															<GradientStop Color="#FF9AB9E1" Offset="0"/>
															<GradientStop Color="#FF9AB9E1" Offset="0.927"/>
															<GradientStop Color="#FFFCFCFC" Offset="0.524"/>
														</LinearGradientBrush>
													</Rectangle.Fill>
												</Rectangle>
											</Border>
										</ControlTemplate>
									</Thumb.Template>
								</Thumb>
							</Track.Thumb>
						</Track>
					</Grid>
				</Border>

				<!-- Define triggers to make the TickBars visible -->
				<ControlTemplate.Triggers>
					<Trigger Property="Slider.TickPlacement" Value="TopLeft">
						<Setter TargetName="LeftTick" Property="Visibility"
													  Value="Visible" />
					</Trigger>
					<Trigger Property="Slider.TickPlacement" Value="BottomRight">
						<Setter TargetName="RightTick" Property="Visibility"
													   Value="Visible" />
					</Trigger>
					<Trigger Property="Slider.TickPlacement" Value="Both">
						<Setter TargetName="LeftTick" Property="Visibility"
													  Value="Visible" />
						<Setter TargetName="RightTick" Property="Visibility"
													   Value="Visible" />
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>

			<!-- Define style for the Slider control -->
			<Style x:Key="styleSlider" TargetType="Slider">
				<Setter Property="Orientation" Value="Horizontal" />
				<Setter Property="Template" Value="{StaticResource templateSlider}" />
			</Style>
		</Grid.Resources>
		<Grid.RowDefinitions>
			<RowDefinition  />
			<RowDefinition Height="25" />
			<RowDefinition />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition />
			<ColumnDefinition />
		</Grid.ColumnDefinitions>
		<StackPanel RenderTransformOrigin="0.5,0.5" x:Name="spashPanel" Opacity="1" HorizontalAlignment="Center"
                VerticalAlignment="Top" Margin="-100,125,0,0" Grid.RowSpan="3" Grid.ColumnSpan="2">
			<StackPanel.RenderTransform>
				<TransformGroup>
					<ScaleTransform ScaleX="1" ScaleY="1"/>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform X="0" Y="50"/>
				</TransformGroup>
			</StackPanel.RenderTransform>
			<TextBlock Height="Auto" FontFamily="Segoe" FontSize="24" Foreground="#393839" HorizontalAlignment="Stretch" 
                 Margin="0,0,0,0" VerticalAlignment="Stretch" Text="{r:Resources BookvarName}" />
			<TextBlock Height="Auto" FontFamily="Segoe" FontSize="16" Foreground="#6BA2B5" HorizontalAlignment="Stretch"
                 Margin="0,0,0,0" Text="{r:Resources BookvarMantra}" />
			<Frame Source="Resources/Splash/BookvarLogo.xaml" NavigationUIVisibility="Hidden" Width="Auto" 
             HorizontalAlignment="Left" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
				<Frame.RenderTransform>
					<TransformGroup>
						<ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
						<SkewTransform AngleX="0" AngleY="0"/>
						<RotateTransform Angle="0"/>
						<TranslateTransform X="0" Y="0"/>
					</TransformGroup>
				</Frame.RenderTransform>
			</Frame>

		</StackPanel>
		<StackPanel x:Name="content" Grid.RowSpan="3" Grid.ColumnSpan="2" Orientation="Vertical"  >

			<StackPanel Orientation="Horizontal" Margin="0,40,0,0" HorizontalAlignment="Center" >
				<StackPanel Orientation="Vertical" MouseLeftButtonUp="StartNewMindMap" Margin="0,0,50,0" >
					<Image Style="{StaticResource ImageNew}"  />
					<TextBlock Style="{StaticResource TextBlockIcon}" VerticalAlignment="Center"
                     Text="{r:Resources NavigationNewMindMapText}" />
				</StackPanel>
        
				<StackPanel Orientation="Vertical" MouseLeftButtonUp="OpenMindMap" >
                    <Image Style="{StaticResource ImageOpen}" />
					<TextBlock Style="{StaticResource TextBlockIcon}" VerticalAlignment="Center"
                     Text="{r:Resources NavigationOpenMindMapText}" />
                </StackPanel>
		    </StackPanel>

			<TextBlock Style="{StaticResource TextBlockIcon}" Padding="30,30,0,0"  VerticalAlignment="Center"
                 Text="{r:Resources NavigationRecentMindMapsText}" />
			<ScrollViewer Padding="30,10,0,0" Height="310">

				<ItemsControl x:Name="imagesItemsControl">
					<ItemsControl.ItemsPanel>
						<ItemsPanelTemplate>
							<atp:AnimatingTilePanel
													 ItemHeight="{Binding ElementName=sliderSize, Path=Value}"
													 ItemWidth="{Binding ElementName=sliderSize, Path=Value}"  />
						</ItemsPanelTemplate>
					</ItemsControl.ItemsPanel>
					<ItemsControl.ItemTemplate>
						<DataTemplate>
							<Border Margin="1" BorderThickness="1" CornerRadius="0"  BorderBrush="#FFA9C3DD">
								<Border.Background>
									<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
										<GradientStop Color="#FFD3D2D2" Offset="0"/>
										<GradientStop Color="#FFFFFFFF" Offset=" 0.927"/>
										<GradientStop Color="#FFD3D2D2" Offset="0.442"/>
										<GradientStop Color="#FFFCFCFC" Offset="0.718"/>
									</LinearGradientBrush>
								</Border.Background>
								<StackPanel Orientation="Vertical"  Margin="10,10,10,10"  >
									<TextBlock Text="{Binding Path=Title}" HorizontalAlignment="Center" TextWrapping="Wrap"
											   Padding="10,0,10,0"  DataContext="{Binding}" />

									<Image Source="{Binding Path=ThumbnailUri}" Tag="{Binding Path=Description}" 
                         MouseLeftButtonUp="OpenRecentMindMap">
										<Image.ToolTip>
											<TextBlock Text="{Binding Path=Description}" />
										</Image.ToolTip>
									</Image>
								</StackPanel>
							</Border>
						</DataTemplate>
					</ItemsControl.ItemTemplate>
				</ItemsControl>

			</ScrollViewer>
			<Border BorderBrush="#FFA9C3DD" Height="40" Margin="30,10,0,0" BorderThickness="1" CornerRadius="0">

				<Border.Background>
					<LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
						<GradientStop Color="#FFD3D2D2" Offset="0"/>
						<GradientStop Color="#FFFFFFFF" Offset="0.927"/>
						<GradientStop Color="#FFD3D2D2" Offset="0.291"/>
						<GradientStop Color="#FFFCFCFC" Offset=" 0.646"/>
					</LinearGradientBrush>
				</Border.Background>
				<StackPanel Orientation="Horizontal" Margin="10,3,10,5" >
					<TextBlock  Text="{r:Resources NavigationSliderSizeText}" Padding="0,0,10,0" VerticalAlignment="Center" Style="{StaticResource TextBlockIcon}"/>
					<Slider x:Name="sliderSize" Width="200" Height="25" Minimum="150" Maximum="300" SmallChange="40" Value="150"
							    Style="{StaticResource styleSlider}" HorizontalAlignment="Center" />
				</StackPanel>
			</Border>
		</StackPanel>


	</Grid>


</Page>
